<template>
  <div>
    <new-search-bar searchFixed="true" bgSearch="c-bg-white c-pv24-i" @search="startSearch" @cancel="startSearch"></new-search-bar>
    <div class="c-ph24 c-mt10">
      <div @click="clickSocialGroupItem(index)" v-for="(item,index) in socialGroupList" :key="index" class="c-flex-row c-aligni-center c-pv20">
        <div class="c-ww160 c-hh160 c-text-hidden c-br16">
          <CoverImg coverSizeClass="c-w100 c-h c-text-hidden" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" />
        </div>
        <div class="c-w0 c-flex-grow1 c-pl20 c-flex-column c-hh160 c-justify-sb">
          <div class="c-fs26 c-fw600 c-fc-xblack c-text-ellipsis1">{{item.name}}</div>
          <div class="c-text-ellipsis1 c-fs22 c-fc-gray">{{item.intro}}</div>
          <div class="c-fs24 c-fc-gray c-flex-row c-aligni-center c-justify-sb">
            <div class="c-fs24 c-fc-xmlred c-fw600 c-w0 c-flex-grow1 c-textAlign-l" v-if='item.needPwd == 1'>加密</div>
            <div class="c-fs26 c-fc-xmlred c-fw600 c-w0 c-flex-grow1 c-textAlign-l" v-else-if="item.price * 1 > 0">
              <span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{!item.optimal ? item.price : (item.optimal && item.optimal.optimalPrice > 0 && item.optimal.optimalPriceType != 1 ? item.optimal.optimalPrice : item.price)}}
            </div>
            <div class="c-fs24 c-fc-xmlred c-fw600 c-w0 c-flex-grow1 c-textAlign-l" v-else>免费</div>
            <div v-if="item.isFull != 1&&socialRoomConfs.isShowPeopleNumber==1">
              <span class="theme-fc">{{item.number}}</span>
              <span>个群成员</span>
            </div>
            <div v-if="item.isFull == 1">群成员已满</div>
          </div>
        </div>

      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无商品"></loading-status-tem>
    </div>
    <div v-if="companyAuth != null && companyAuth.companyNav != null">
      <nav-bottom-bar :itemIndex="9" v-for="(item,index) in companyAuth.companyNav" :key="index" v-if="item.navType == 9"></nav-bottom-bar>
    </div>
  </div>
</template>
<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import {
  utilJs
} from "@/utils/common.js";
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
const LIMIT = 10; //每页显示多少条数据
let pageIndex = 1; //当前页面
let searchText; //搜索输入框
export default {
  name: "SocialGroupList",
  components: {
    loadingStatusTem,
    NavBottomBar,
    newSearchBar,
    CoverImg
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      dataStatus: 'HAS_MORE_DATA',
      socialGroupList: [],
      socialRoomConfs:'',
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  methods: {
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickSocialGroupItem(index) {
      let toPath = `/homePage/socialGroup/socialGroupInfo?SocialRoomId=${this.socialGroupList[index].socialRoomId}`;
      this.iosAppRouteChange(toPath);
    },
    //搜索
    startSearch: function (e) {
      pageIndex = 1;
      searchText = e.searchValue;
      this.getGroupList();
    },
    //获取社群配置
    getSocialRoomConfs() {
      utilJs.getMethod(`${global.apiurl}socialRoomExtend/getSocialRoomConfs`,
      res => {
        this.socialRoomConfs = res
      })
    },
    //获取社群列表
    getGroupList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}social/allSocial?socialName=${searchText}&page=${pageIndex}&limit=${LIMIT}`,
        res => {
          this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
          if (pageIndex == 1) {
            this.socialGroupList = res.data;
          } else {
            this.socialGroupList = [...this.socialGroupList, ...res.data];
          }
          if (res.data && (res.data.length < LIMIT)) {
            this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let title = "社群列表"; //window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue("", "", shareUrl, "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.socialGroupList.length > 0) {
          this.getGroupList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      searchText = "";
      this.dataStatus = 'HAS_MORE_DATA';
      this.socialGroupList = [];
      this.getGroupList();
      this.getSocialRoomConfs()
    },
  },

  activated() {
    setDocumentTitle("社群列表");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.socialGroupList)) {
      this.initData()
    }
    // this.initData();
    this.wechatShare();
    //相关逻辑已转移到beforeRouteEnter中
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
